<template>
  <div>
    <div class="qup-title-box"><span class="border" /><span>异常信息反馈【行程异常(当天无法到达、无法查看晨会)，需后台协助、跟进、反馈事项】</span></div>
    <table-box
      ref="refTable"
      table-size="mini"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      show-index
      no-request
      :table-height="300"
      :other-filters="otherFilters"
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <!-- 新增/编辑 -->
    <el-dialog
      width="700px"
      :title="formData.id?'编辑':'新增'"
      :visible.sync="showDlg"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" label-width="110px" size="mini" :model="formData" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item :rules="[{ required:true, message: '请选择', trigger: 'change' }]" label="异常反馈人" prop="feedbackPerson">
              <el-input v-model="formData.feedbackPerson" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="postName">
              <el-input v-model="formData.postName" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required:true, message: '请选择', trigger: 'change' }]" label="反馈类型" prop="type">
              <c-dict-select v-model="formData.type" dict-type-code="FEEDBACK_TYPE" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :rules="[{ required: formData.type==='B'|| formData.type==='C', message: '请选择', trigger: 'change' }]" label="反馈型号" prop="model">
              <el-input v-model="formData.model" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否有效" prop="validCode">
              <c-dict-select v-model="formData.validCode" dict-type-code="VALID_CODE" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商家异常反馈描述" prop="describe">
              <el-input v-model="formData.describe" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <c-file-table-box
              v-model="formData.shopAttachmentDTOS"
              :table-height="250"
              type-code="ACCESS110"
              belong-model="SHOP_INTERVIEW"
              :model-id="formData.id"
            />
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showDlg = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
    <div v-if="!isDetail" style="margin-bottom:60px">
      <div class="qup-title-box"><span class="border" /><span>项目专员异常反馈</span></div>
      <el-form label-width="120px">
        <el-row>
          <el-col>
            <el-form-item label="异常反馈描述：" prop="describe">
              <el-input v-model="describe" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 图片预览 -->
      <el-image-viewer
        v-if="imgDialogVisible"
        :on-close="handleCloseImg"
        :url-list="previewImgs"
      />
    </div>

  </div>
</template>
<script>
import { deleteExceptionFeedback, saveExceptionFeedback } from '@/api/marketService/dailyPatrol'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

import { filterURL } from '@/utils'
export default {
  name: 'ExceptionFeedback',
  components: { ElImageViewer },
  props: {
    patrolId: {
      type: String,
      default: ''
    },
    shopCode: {
      type: String,
      default: ''
    },
    picConfigId: {
      type: String,
      default: ''
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgDialogVisible: false,
      previewImgs: [],
      showDlg: false,
      describe: '',
      formData: {
        describe: '',
        feedbackPerson: '',
        id: null,
        model: '',
        patrolId: '',
        phone: '',
        postName: '',
        type: '',
        validCode: '',
        shopAttachmentDTOS: []
      },
      rules: {},
      tableSelected: [],
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/patrolAbnormalFeedback/page`,
        apiHeader: { },
        hideSearchBar: true,
        // pageSize: 20,
        // sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'feedbackPerson',
            label: '异常反馈人',
            minWidth: 100
          },
          {
            prop: 'postName',
            label: '职务',
            minWidth: 100
          },
          {
            prop: 'phone',
            label: '联系电话',
            minWidth: 100
          },
          {
            prop: 'type',
            label: '反馈类型',
            minWidth: 100,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'FEEDBACK_TYPE'
            }
          },
          {
            prop: 'model',
            label: '反馈型号',
            minWidth: 100
          },
          {
            prop: 'describe',
            label: '商家异常反馈描述',
            minWidth: 100
          },
          // {
          //   prop: 'planVisitTime',
          //   label: '反馈时间',
          //   minWidth: 140,
          //   formatData: ({ planVisitTime }) => {
          //     if (planVisitTime) return parseTime(planVisitTime, '{y}-{m}-{d}')
          //     else return ''
          //   }
          // },
          {
            prop: 'validCode',
            label: '是否有效',
            minWidth: 90,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'VALID_CODE'
            }
          },
          {
            label: '操作',
            button: [
              {
                name: '附件预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }
        ],
        btnList: [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'delete',
            outerFlag: true
          }
        ]
      }
    }
  },
  watch: {
    patrolId: {
      handler(v) {
        if (!v) return
        this.refreshTable()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    if (this.isDetail) {
      this.tableConfig.btnList = []
    }
  },
  methods: {
    handlePreview(row) {
      if (!row.shopAttachmentDTOS) {
        this.$message.warning('没有附件')
        return
      }
      this.previewImgs = row.shopAttachmentDTOS.map(v => filterURL(v.attachmentUrl))
      this.imgDialogVisible = true
    },

    handleCloseImg() {
      this.imgDialogVisible = false
    },
    getData() {
      return this.describe
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'delete':
          this.handleDelete()
          break
        default:
          break
      }
    },
    handleDelete() {
      if (!this.singleJudge(this.tableSelected, '删除', true)) {
        return
      }
      deleteExceptionFeedback(this.tableSelected[0].id).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.refreshTable()
        }
      })
    },
    closeDlg() {
      this.formData = {}
      this.showDlg = false
    },
    handleSave() {
      const submitFiles = this.formData.shopAttachmentDTOS.map(v => v.response.data)
      this.formData.shopAttachmentDTOS = submitFiles
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          saveExceptionFeedback(this.formData).then(res => {
            if (res.success) {
              this.$message.success('保存成功')
              this.closeDlg()
              this.refreshTable()
            }
          })
        }
      })
    },
    handleEdit(row) {
      if (row && row.id) {
        const { describe, feedbackPerson, id, model, patrolId, phone, postName, type, validCode, shopAttachmentDTOS = [] } = row
        this.formData = { describe, feedbackPerson, id, model, patrolId, phone, postName, type, validCode, shopAttachmentDTOS }
      }
      this.$set(this.formData, 'patrolId', this.patrolId)
      this.showDlg = true
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.otherFilters = [{ 'property': 'patrolId', 'value': this.patrolId, 'operator': '=', 'id': 'patrolId' }]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(v)
      })
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
